<template>
  <div class="pay">
    <div class="payTop">
      <van-icon name="arrow-left" @click="$router.push({name:'SubmitOrder'})" />
      <h5>支付页面</h5>
    </div>
    <div class="isshow1" v-show="isPay">
      <van-password-input :value="value" :focused="showKeyboard" @focus="showKeyboard = true" />

      <!-- 数字键盘 -->
      <van-number-keyboard
        :show="showKeyboard"
        @input="onInput"
        @delete="onDelete"
        @blur="showKeyboard = false"
      />
      <van-overlay v-show="isShow" />

      <van-popup v-model="isShow">
        <van-loading color="#1989fa" size="36px" />
        <div>正在支付</div>
      </van-popup>
    </div>
    <div class="isshow2" v-show="!isPay">
      <span>支付成功了，</span>
      <van-button class="payZai" type="info" @click="addOrder">再去逛逛</van-button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { mapState, mapMutations, mapAction } from "vuex";
export default {
  data() {
    return {
      value: "",
      showKeyboard: true,
      isShow: false,
      isPay: true,
      timer: null,
      order_num:1,
      order_arr:[]
    };
  },
  methods: {
    ...mapMutations("product", ["saveAllOrder"]),
    addOrder(){
      let currentarr=JSON.parse(localStorage.getItem('allOrder'))
      let arr=JSON.parse(localStorage.getItem('checkedgoods'))
      console.log(arr)
      for(let i=0;i<arr.length;i++){
        axios
        .delete(`http://192.168.17.95:3000/api/v1/cart/delcart/${arr[i]._id}`)
        .then(res => {
          console.log(res);
          // if (res.data.code == 1) {
          //   this.carts.splice(index, 1);
          //   this.count();
          // } 
        });
      }
      if(currentarr){
        this.order_num=currentarr.length
      }else{
        this.order_num=0
      }
      let currentorder={
        order_id:this.order_num,
        order_products:arr
      }// 拿到当前付款订单对象
      
      //拿到付款过的订单数组
      if(currentarr){
          currentarr.push(currentorder)
          localStorage.setItem('allOrder',JSON.stringify(currentarr))
      }else{
        currentarr=[]
        currentarr.push(currentorder)
        localStorage.setItem('allOrder',JSON.stringify(currentarr))
      }
      
      this.$router.push({name:'Home'})
    },
    showPopup() {
      this.show = true;
    },
    onInput(key) {
      this.value = (this.value + key).slice(0, 6);
      let val = this.value.length;
      if (val == 6) {
        this.isShow = true;
        this.showKeyboard = false;
        this.timer = setTimeout(() => {
          console.log(this.timer);
          this.isShow = false;
          this.$toast("支付成功");
          this.isPay = false;
        }, 500);
      }
      console.log(this.timer);
    },
    onDelete() {
      this.value = this.value.slice(0, this.value.length - 1);
      console.log(this.value);
    },
    beforeCreate() {
      clearInterval(this.timer);
    }
  },
   computed: { 
    ...mapState("product", [
      "checkedgoods",
    ])
  }
};
//每点一个按钮生成一个订单，生成一个订单编号，一个订单是一个小块div
// 点完按钮以后取出来checkgoods，打印一下看是否正确，正确的时候循环显示在一个div中
//将购物车商品循环找checkgoods，找到就删除。
</script>
<style scoped>
@import "../css/pay.css";
</style>